<template>
  <div
    :class="flag?'defaultProgressClass':['changeProgressClass','LineNameHint']"
    @mouseover="flag=!flag"
    @mouseout="flag=!flag"
  >
    <el-row>
      <el-col :span="4">
        <span class="line_name_font" >{{ line_name }}</span>
      </el-col>
      <el-col :span="3" style="text-align:center">
        <el-tooltip :content="lmonitor_value + '个PI监控点'" placement="top-end">
          <el-badge :value="lmonitor_value" class="item" type="primary">
            <div></div>
          </el-badge>
        </el-tooltip>

        <el-tooltip :content="lwarning_value + '个异常监控点'" placement="top-start">
          <el-badge :value="lwarning_value" class="item" type="danger">
            <div></div>
          </el-badge>
        </el-tooltip>
      </el-col>
      <el-col :span="17">
        <el-progress
          :text-inside="true"
          :stroke-width="18"
          :percentage="lpro_percent"
          :color="'#14d288'"
        ></el-progress>
      </el-col>
    </el-row>
  </div>
</template>


<script>
    export default {
        props: ["line_name", "lmonitor_value", "lwarning_value", "lpro_percent"],
        data() {
            return {
            flag: true
            };
        },
        methods: {}
    };
</script>


<style scoped>
    .item {
    margin-top: -5px;
    margin-right: 25px;
    }

    .defaultProgressClass {
    background-color: white;
    }

    .changeProgressClass {
    background-color: #ebfaf4;
    border-radius: 3px;
    }

    .LineNameHint {
    font-weight: bold;
    color: #14d288;
    cursor: pointer;
    }
    .line_name_font{
      font-weight: bold;
    }
</style>
